<template>
    <div class="enterprise">
        <!--最上面两个表单 -->
        <el-table
            border
            :show-header="false"
            :data="text"
            style="width: 100%">
            <el-table-column
            width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
            </el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
            </template>
            </el-table-column>
        </el-table>
        <!-- 中间的表单 -->
         <el-table
            border
            :show-header="false"
            :data="tableData"
            style="width: 100%">
            <el-table-column
            width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
            </el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
            </template>
            </el-table-column>
        </el-table>
        <!-- 所在城市的表单 -->
        <el-table
            border
            :show-header="false"
            :data="city"
            style="width: 100%">
            <el-table-column
            width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
            </el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
               <!-- 下拉框 -->
               <el-dropdown size="small" split-button type="primary">
                    小型尺寸
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>黄金糕</el-dropdown-item>
                        <el-dropdown-item>狮子头</el-dropdown-item>
                        <el-dropdown-item>螺蛳粉</el-dropdown-item>
                        <el-dropdown-item>双皮奶</el-dropdown-item>
                        <el-dropdown-item>蚵仔煎</el-dropdown-item>
                    </el-dropdown-menu>
                    </el-dropdown>
            </template>
            </el-table-column>
        </el-table>
        <!-- 详细地址模块 -->
        <el-table
            border
            :show-header="false"
            :data="address"
            style="width: 100%">
            <el-table-column
            width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
            </el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
            </template>
            </el-table-column>
        </el-table>
        <!-- 企业性质模块 -->
        <el-table
            border
            :show-header="false"
            :data="property"
            style="width: 100%">
            <el-table-column
            width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
            </el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
            </template>
            </el-table-column>
        </el-table>
        <!-- 确认模块 -->
         <el-table
            border
            :show-header="false"
            :data="confirm"
            style="width: 100%">
            <el-table-column
            width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
            </el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
             <el-button type="success">确认保存</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default{
        data() {
            return{
                tableData: [{
                date: '企业名称:',
                }, {
                date: '负责人:',
                }, {
                date: '联系电话：',
                }, {
                date: '所在国家：',
                }],
                input:'',
                text:[
                    {
                        date:'企业编号',
                    },
                    {
                        date:'企业KEY'
                    }
                ],
                city:[
                    {
                        date:'所在城市'
                    }
                ],
                address:[
                    {
                        date:'详细地址'
                    },
                    {
                        date:'天气地址拼音'
                    },
                    {
                        date:'展示端名称'
                    }
                ],
                property:[
                    {
                        date:'企业性质'
                    }
                ],
                confirm:[
                    {
                        date:''
                    }
                ]
                   
            }
               
        },
     
    methods: {
       handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleClick() {
        alert('button click');
      }
    
 }
    }
 </script>

<style lang="scss">
    html{
     margin:20px;
    .enterprise{
    .el-dropdown {
    vertical-align: top;
        }
    .el-dropdown + .el-dropdown {
        margin-left: 15px;
    }
    .el-icon-arrow-down {
        font-size: 12px;
         }  
    .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color:#fff;
    }
    .el-table__row {
        height:77px;
    }
    }
}

    
</style>